<template>
  <div class="login_container">
    <div class="login_box">
      <!-- 头像区域 -->
      <div class="avatar_box">
        <img src="../../assets/logo.png" alt="">
      </div>
      <!-- 登录表单区域 -->
      <el-form ref="loginFormRef" label-width="0" class="login_form" :model="loginForm" :rules="loginFormRules">
        <!-- 用户名 -->
        <el-form-item prop="loginName">
          <el-input v-model="loginForm.loginName" prefix-icon="el-icon-user" />
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="password">
          <el-input v-model="loginForm.password" prefix-icon="el-icon-lock" type="password" />
        </el-form-item>
        <!-- 按钮区 -->
        <el-form-item class="btns">
          <el-button :loading="loading" type="primary" @click="login">登录</el-button>
          <el-button type="info" @click="resetLoginForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { login } from '@/api/user'
export default {
  data() {
    return {
      loading: false,
      redirect: undefined,
      // 这是登录表单的数据绑定对象
      loginForm: {
        loginName: '',
        password: ''
      },
      loginFormRules: {
        // 验证用户名
        loginName: [
          { required: true, message: '请输入登录名称', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        // 验证密码
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  methods: {
    // 点击重置表单
    resetLoginForm() {
      this.$refs.loginFormRef.resetFields()
    },
    login() {
      // this.$router.push({ path: this.redirect || '/' })

      login(this.loginForm).then(res => {
        console.log(res)
      })

      // this.$refs.loginFormRef.validate(result => {
      //   if (!result) return
      //   this.loading = true
      //   this.$http.post('/doLogin', this.loginForm).then(res => {
      //     if (res.success) {
      //       this.$message.success('登录成功')
      //       window.sessionStorage.setItem('token', res.data)
      //       this.$router.push('/')
      //       this.loading = false
      //     }
      //   }).catch(() => {
      //     this.$message.error('登录失败')
      //     this.loading = false
      //   })
      // })
    }
  }
}
</script>
<style lang="scss" scoped>
    .login_container {
        background-color: #2b4b6b;
        height: 100%;
    }
    .login_box {
        width: 450px;
        height: 300px;
        background-color: #fff;
        border-radius: 3px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        .avatar_box{
            height: 130px;
            width: 130px;
            border: 1px solid #eee;
            border-radius: 50%;
            padding: 10px;
            box-shadow: 0 0 10px #ddd;
            position: absolute;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #ddd;
            img{
                width: 100%;
                height: 100%;
                border-radius: 50%;
                background-color: #eee;
            }
        }
    }

    .login_form{
        position: absolute;
        bottom: 0;
        width: 100%;
        padding: 0 20px;
        box-sizing: border-box;
    }

    .btns{
        display: flex;
        justify-content: flex-end;
    }
</style>
